import React, { Component } from 'react'
import { Row, Col } from 'antd';
import Device from '../../types/Device';
import DataCategory from '../../types/DataCategory';
import DeviceData from '../../types/DeviceData';
import BasicDeviceInfo from './BasicDeviceInfo';
import DataType from '../../types/DataType';


/**
 * 展示设备的TEXT以及SELECT类型数据
 */
interface IProps {
    gridNum: number
    addedDeviceWithData: Set<{ device: Device, deviceDataList: DeviceData[] }>
    allCateToDisplay: Set<DataCategory>

}
export default class LiteralDataTable extends Component<IProps> {
    render() {
        const { gridNum, addedDeviceWithData, allCateToDisplay } = this.props;
        return (
            <div>
                <Row>
                    <Col span={gridNum}>
                        <div className="basicDeviceInfo"></div>
                    </Col>
                    {Array.from(addedDeviceWithData).map(item => (<Col span={gridNum}><BasicDeviceInfo device={item.device} /></Col>))}
                </Row>
                {Array.from(allCateToDisplay).filter(item=>item.dataType!==DataType.TWODIMENSIONAL).map(itemCate => (
                    <Row>
                        <Col span={gridNum}>
                            <div className="CategoryInfoTableGrid cateNameGrid">
                                {itemCate.dataCategoryName}
                            </div>
                        </Col>
                        {Array.from(addedDeviceWithData).map(itemDevice => {
                            return (
                                itemDevice.deviceDataList.map(eachCateData => eachCateData.categoryID).includes(itemCate.dataCategoryID) ?
                                    (<Col span={gridNum}>
                                        <div className="CategoryInfoTableGrid">
                                            {itemDevice.deviceDataList.filter(item => item.categoryID === itemCate.dataCategoryID)[0].dataValue}
                                        </div>
                                    </Col>)
                                    :
                                    (<Col span={gridNum}>
                                        <div className="CategoryInfoTableGrid">
                                            ——
                                            </div>
                                    </Col>)
                            )
                        })}
                    </Row>))}
            </div>
        )
    }
}
